<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="./layui/css/layui.css" media="all">
</head>

<body>
    <table class="layui-table" lay-data="{url:'./demo.json', id:'test3'}" lay-filter="test3">
        <thead>
            <tr>
                <th lay-data="{type:'checkbox'}">ID</th>

                <th lay-data="{field:'status',align:'center',templet: '#statusTpl'}">
                    <input type="checkbox" name="statusAll" lay-skin="primary">
                </th>
                <th lay-data="{field:'id', width:80, sort: true}">ID</th>
                <th lay-data="{field:'username', width:120, sort: true}">用户名</th>
                <th lay-data="{field:'email', minWidth: 150}">邮箱</th>
                <th lay-data="{field:'sex', width:80,}">性别</th>
                <th lay-data="{field:'city', minWidth: 100}">城市</th>
                <th lay-data="{field:'experience', sort: true}">积分</th>
            </tr>
        </thead>
    </table>

    <script type="text/html" id="statusTpl">
        <input type="checkbox" name="status" lay-skin="primary" {{d.status=='true' ? 'checked' : (d.status=='disabled' ? 'disabled' : '') }}>
    </script>

    <script src="./layui/layui.js" charset="utf-8"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
    <script>
    layui.use('table', function() {
        var table = layui.table;
    });
    </script>
</body>

</html>